<template>
    <div class="login-container" @click="goToStudent">
        <el-form class="login-page">
            <el-form-item></el-form-item>
            <h4 class="title_1">民航监察员培训学院</h4>
            <h5 class="title_2">CAAC Academy</h5>
            <h5 class="title_3">请选择您的身份...</h5>
            <el-form-item></el-form-item>
            <div class="body">
            <el-form-item class="login-img1">
                <div class="demo-image__placeholder">
                    <div class="block">
                        <el-image :src="require('../images/studentdemo.png')" fit="cover"></el-image>
                    </div>
                </div>
                <el-row>学生端</el-row>
            </el-form-item>
            <el-form-item class="login-img2">
                <div class="demo-image__placeholder">
                    <div class="block">
                        <el-image :src="require('../images/teacherdemo.png')" fit="cover"></el-image>
                    </div>
                </div>
                <el-row>老师端</el-row>
            </el-form-item>
            </div>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "SelectUser",
        data() {
            return {
            }
        },
        methods: {
            goToStudent(event) {
                this.$router.push({path: '/login'});
            },
        }
    }
</script>

<style scoped>
    .body{
        text-align: center;
    }
    .login-container {
        width: 100%;
        height: 100%;
    }
    .login-page {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: auto;

        padding: 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        background: url("../images/select_user.png") no-repeat ;
        background-size: 100% 100%;
        text-align: center;
    }
    .login-img1{
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: auto;
        height: 120px;
        width: 80px;
        padding: 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        float: left;
        margin-left: 1%;
    }
    .login-img2{
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: auto;
        height: 120px;
        width: 80px;
        padding: 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        float: left;
        margin-left: 10%;

    }
    .title_1 {
        text-align: center;
        color: white;
    }
    .title_2 {
        text-align: center;
        color: white;
    }
    .title_3 {
        text-align: left;
        margin-left: 5px;
        color: white;
    }

</style>
